<template>
    <div class ='container' ref = 'container'>

    </div>
</template>

<script setup>
import { ref ,onMounted,toRefs,watch} from "vue";
import  * as echarts from 'echarts';

const container = ref(null)
const chart =ref(null)
const props = defineProps({
    options:{
        required:'true',
        type:Object,
        default:{}
    }
})


onMounted(()=>{
const chart = echarts.init(container.value)
chart.setOption(props.options)
})

const {options} =toRefs(props)
watch(options,(newOptions)=>{
    chart.value.setOption(newOptions)
},{
    deep:true
})


</script>

<style  scoped>
.container{
    width:100%;
    height:100%;
}
</style>